<template>
  <div class="content">
    <!-- 筛选部分 -->
    <el-card>
      <topcard class="topcard">内容编辑</topcard>
      <el-form ref="form" label-width="60px" :model="form">
        <!-- 状态 -->
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio>全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失效</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 频道 -->
        <el-form-item label="频道">
          <el-select v-model="form.channel_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 日期 -->
        <el-form-item label="日期">
          <el-date-picker
            v-model="dataValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
            > >
          </el-date-picker>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button @click="selectForm" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表展示部分 -->
    <div class="list">
      <el-card class="body">
        <div class="top">
          根据筛选条件查询到{{ tableData.total_count }}条数据,当前是第{{
            pagination.currentPage
          }}页
        </div>
        <el-table :data="tableData.results" style="width: 100%">
          <el-table-column prop="cover" label="封面">
            <template v-slot="scope">
              <img
                v-if="scope.row.cover.images[0]"
                :src="scope.row.cover.images[0]"
                alt=""
              />
              <img v-else src="../../assets/站位.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题"> </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-tag :type="scope.row.status === 2 ? 'success' : 'danger'">{{
                scope.row.status === 2 ? '审核通过' : '审核未通过'
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template v-slot="scope">
              <el-button
                @click="edit(scope.row.id.c[0], scope.row.id.c[1])"
                type="primary"
                icon="el-icon-edit"
                circle
              ></el-button>
              <el-button
                @click="del(scope.row.id.c[0], scope.row.id.c[1])"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码分页 -->
        <el-pagination
          background
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total_count"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getContentData,
  delContent,
  searchArticles,
  getChannels
} from '@/api/content.js'
export default {
  data () {
    return {
      // 选择框值
      selectValue: '',
      // 表格数据
      tableData: [],
      // 分页
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 1
      },
      page: '',
      // 文章id
      id: '',
      // 展示的数据
      options: [],
      // 日期组件值
      dataValue: [],
      form: {
        status: undefined, // 否 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部
        channel_id: undefined, // 否 频道 id，不传为全部
        begin_pubdate: undefined, // 否 2019-01-01 起始时间，不传就不限定开始时间
        end_pubdate: undefined, // 否 2019-01-02 截止时间，不传就不限定结束时间
        page: undefined, // 否 页数，默认是 1
        per_page: undefined, // 否 每页数量，默认每页 10 条
        response_type: undefined // 否 返回数据的字段，不传返回用于内容管理的字段，传 comment 返回用于评论管理的字段，传 statistic 返回用于图文数据的字段
      }
    }
  },
  created () {
    this.getData()
    // 获取文章频道id
    getChannels().then(res => {
      // window.console.log('文章频道', res)
      this.options = res.data.channels
      // window.console.log(this.options)
    })
  },
  methods: {
    search () {
      this.getData()
      this.pagination.currentPage = 1
    },
    getData () {
      const params = {
        ...this.form,
        // 当前页码
        page: this.pagination.currentPage,
        // 页容量
        per_page: this.pagination.pageSize
      }
      getContentData(params).then(res => {
        // window.console.log(params)
        window.console.log('res', res)
        this.tableData = res.data
      })
    },
    // 改变页容量
    handleSizeChange (size) {
      // window.console.log(`每页${size}条`)
      this.pagination.pageSize = size
      this.search()
    },
    // 改变页码
    handleCurrentChange (page) {
      // window.console.log(`当前${page}页`)
      this.pagination.currentPage = page
      this.selectForm()
    },
    // 点击查询
    selectForm () {
      const params = {
        ...this.form,
        channel_id: this.options.value,
        page: this.pagination.currentPage,
        per_page: this.pagination.pageSize
        // begin_pubdate: this.dataValue[0],
        // end_pubdate: this.dataValue[1]
      }
      if (this.channel_id) {
        searchArticles(params).then(res => {
          // this.form.begin_pubdate = this.dataValue[0]
          // this.form.end_pubdate = this.dataValue[1]
          // console.log(this.form)
          console.log('筛选列表', res)
          this.tableData = res.data
        })
      } else {
        this.getData()
      }
    },
    // 删除按钮
    del (id1, id2) {
      // window.console.log('删除文章id', `${id1}${id2}`)
      this.id = `${id1}${id2}`
      window.console.log('删除文章id', this.id)
      this.$confirm('确定要删除嘛', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delContent({ target: this.id }).then(res => {
          window.console.log(res)
          this.search()
        })
      })
    },
    // 编辑按钮
    edit (id1, id2) {
      this.id = `${id1}${id2}`
      this.$router.push(`/editArticle/${id1}${id2}`)
    }
  }
}
</script>
<style lang="less">
.content {
  .topcard {
    margin-bottom: 0;
  }
  .pagination {
    padding-top: 20px;
    text-align: center;
  }
  img {
    width: 150px;
    height: 110px;
  }
  .body {
    margin-top: 20px;
    .top {
      border-bottom: 1px solid #ebeef5;
      margin: 0 -20px;
      padding: 0 20px;
      padding-bottom: 15px;
    }
  }
}
</style>
